<template>
  <div class="banner">
    <div class="swiper-container" :class="swiperid">    <!-- 唯一标识：用来标识当前轮播图 -->
      <div class="swiper-wrapper">
        <slot name="swiper-con"></slot>
      </div>
      <!-- 使用变量来控制是否需要分页器 -->
      <div :class="{'swiper-pagination': paginationshow}" :style="{'text-align': paginationdesition}"></div>

    </div>
  </div>
</template>

<script>
  import "../assets/libs/swiper/js/swiper.js"

  export default {
    props: {
      swiperid: {
        type: String,
        default: ''
      },
      paginationshow: {
        type: Boolean,
        default: true
      },
      paginationdesition: {
        type: String,
        default: 'center'
      },
      paginationType: {
        type: String,
        default: 'bullets'
      },
      autoplay: {
        type: Number,
        default: 2000
      },
      loop: {
        type: Boolean,
        default: true
      },
      direction: {
        type: String,
        default: 'horizontal'
      },
      effect: {
        type: String,
        default: 'slide'
      }
    },
    mounted: function(){
      var That = this;  // that代表vue对象，避免和下面的new swiper对象发生引用冲突
      new Swiper('.' + That.swiperid, {
        'direction': That.direction,
        'loop': That.loop,
        'pagination': '.swiper-pagination',
        'paginationType': That.paginationType,
        'autoplay': That.autoplay,
        'effect': That.effect
      });
    }
  }
</script>

<style>
@import '../assets/libs/swiper/css/swiper.css';  /* 注意css库的引入方式 */

.banner{width: 100%; height: 128px; overflow: hidden}
.banner .swiper-container .swiper-slide img{width: 100%;}
.swiper-pagination-bullet-active{background: #FFFFFF;}
</style>
